.qimen {
  .margins {
    margin: 0 auto;
    max-width: 1500px;
    padding: 5px 60px 30px 60px;

    /* ★导航 */
    .affix {
      .divider {
        margin: -20px 0 -15px 0;
      }

      .prediction {
        float: right;
        margin-top: -35px;

        .spacing {
          margin-right: 20px;
          text-align: center;
          font-weight: bold;

          .tag {
            background-color: #00ccff;
            border-radius: 50px 10px 50px 10px;
            margin-top: 0;
            width: 110px;
            transition: .3s;

            .item {
              color: white;

            }
          }
        }

        .spacing:hover {
          .tag {
            background-color: #26acff;
            transition: .3s;
          }
        }

        .r {
          margin-right: -20px;
        }
      }
    }

    /* ★示例数据、选项 */
    .sl-row {

      // ▲示例数据
      .sl-card {
        height: 500px;
        border-radius: 10px;
        background-color: rgba(252, 252, 252);

        .header {
          font-size: 18px;
          text-align: center;
          margin: -13px 0 -20px 0;
        }

        // 基础数据
        .jc-card {
          // border: red 1px solid;
          border: none;
          border-radius: 0;
          margin: -17px 0 0 -17px;
          background-color: rgba(255, 255, 255, 0);

          .data {
            margin: -20px -15px -20px -18px;

            .tag {
              width: 100%;
              border-radius: 5px;
            }

            div {
              margin-bottom: 5.8px;
            }

          }

        }

        // 九宫格
        .jgg-card {
          border: black 1px solid;
          border: none;
          border-radius: 0;
          margin: -15px -15px -20px 0;
          background-color: rgba(255, 255, 255, 0);

          .data {
            margin: -20px -20px 0 -20px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            .jgg {

              // 上半部分
              .top {
                height: 50px;
                line-height: 50px;
                font-weight: bold;
                background-color: rgb(200, 200, 200);
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;

                .left {
                  margin-left: 30px;

                  .mark {
                    float: left;
                    font-size: 16px;
                    color: rgb(80, 80, 80);
                  }
                }

                .right {
                  float: right;
                  margin-right: 30px;

                  .yj {
                    color: rgb(80, 80, 80);
                  }
                }
              }

              // 下半部分
              .bottom {
                height: 395px;
                font-weight: bold;
                background-color: rgb(252, 252, 252);
                border: rgb(228, 231, 237) 1px solid;
                border-top: none;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;

                .jg {
                  font-weight: normal;
                  margin: 0 0 0 -10px;

                  .big {
                    margin: 0 auto;
                    text-align: center;
                    width: 360px;
                    height: 360px;
                    display: grid;
                    padding-top: 12px;
                    grid-template-rows: repeat(3, 1fr);
                    grid-template-columns: repeat(3, 1fr);

                    >div {
                      width: 116px;
                      height: 110px;
                      line-height: 110px;
                      color: #323232;
                      margin-top: 10px;
                      margin-right: 10px;
                      text-align: center;
                      border-radius: 0;
                      background-color: rgb(247, 247, 247);
                      border: 1px rgba(200, 200, 200) solid;
                      box-shadow: 2px 2px 5px rgb(235, 235, 235);
                      transition: 0.3s;
                    }

                  }

                  .small {
                    color: black;
                    display: grid;
                    grid-template-rows: repeat(3, 1fr);
                    grid-template-columns: repeat(3, 1fr);

                    >div {
                      width: 37px;
                      height: 35px;
                      line-height: 35px;
                      font-size: 13px;
                      border-radius: 9px;

                      .core {
                        float: left;
                        margin-left: 1px;
                      }

                      .status {
                        width: 20px;
                        height: 16px;
                        line-height: 22px;
                        float: right;
                        color: #828282;
                        font-size: 10px;
                        margin-right: 1px;
                        border-radius: 10px;
                      }

                      .yiKong {
                        margin-top: -2px;

                        .yiMa {}

                        .xunKong {
                          margin-left: 1px;
                          font-size: 20px;
                        }
                      }

                      .dun {
                        width: 39px;
                        color: white;
                        font-size: 12px;
                        border-bottom-left-radius: 2px;
                        background-color: rgb(181, 147, 43);
                      }
                    }

                    .marki {
                      font-size: 11px;
                      font-weight: bold; // 字体加粗
                    }

                    .qin {
                      color: rgb(50, 50, 50);
                    }
                  }

                }

              }

            }

          }
        }

      }

      /* ▲选项 */
      .xx-card {
        min-height: 500px;
        margin-left: 10px;
        border-radius: 15px;
        background-color: rgba(252, 252, 252);

        .header {
          font-size: 19px;
          text-align: center;
          margin: -14px 0 -20px 0;
        }

        .data {
          margin: -5px 0 0 0;

          .el-input__prefix .el-input__inner {
            width: 20px;
          }

          // 姓名
          .name {}

          // 占事
          .occupy {
            margin: 8px 0 0 0;
          }

          // 日期类型
          .dateType {
            float: left;
            margin: 12px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255);
              --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
              --el-border-radius-base: 16px;
            }
          }

          // 性别
          .sex {
            float: right;
            margin: 12px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255);
              --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
              --el-border-radius-base: 16px;
            }
          }

          // 日期
          .date {
            margin: 55px 0 0 0;

            .leapMonth {
              float: right;
              margin: 5px 0 0 0;
              color: rgb(70, 70, 70);
              -webkit-user-select: none;
              -moz-user-select: none;
              -o-user-select: none;
              user-select: none;
            }
          }

          // 真太阳时
          .trueSolar {
            margin: 7px 0 0 0;

            span {
              -webkit-user-select: none;
              -moz-user-select: none;
              -o-user-select: none;
              user-select: none;
            }

            .beta {
              color: rgb(255, 63, 63);
              font-size: 13px;
              border-radius: 5px;
              background-color: rgb(254, 228, 247);
              margin: 0 0 0 5px;
            }
          }

          // 地区
          .address {
            float: right;
            margin: -20px 0 0 0;

            .city {
              width: auto;
            }
          }

          // 排盘类型
          .paiPanType {
            margin: 10px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255); // 文字颜色
              --el-segmented-item-selected-bg-color: rgb(42, 176, 209); // 背景颜色
              --el-border-radius-base: 16px;
            }

          }

          // 排盘方法
          .paiPanSystem {
            margin: 10px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255); // 文字颜色
              --el-segmented-item-selected-bg-color: rgb(42, 176, 209); // 背景颜色
              --el-border-radius-base: 16px;
            }

            .tip {
              margin-left: 5px;

              .icon {
                color: rgb(255, 166, 0);
              }
            }

          }

          // 奇门类型
          .qiMenType {
            margin: 10px 0 0 0;

            .segmented {
              --el-segmented-item-selected-color: rgb(255, 255, 255); // 文字颜色
              --el-segmented-item-selected-bg-color: rgb(42, 176, 209); // 背景颜色
              --el-border-radius-base: 16px;
            }

            .tip {
              margin-left: 7px;
              vertical-align: -0.5px;
            }
          }

          // 重置选项
          .resetting {
            margin: 25px 0 0 0;
            float: left;

            .resDate {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              margin-left: 10px;
              vertical-align: -2px;
              color: rgb(70, 70, 70);
            }
          }

          // 高级选项
          .senior {
            margin: 25px 0 0 0;
            float: right;
          }

          // 开始排盘
          .starts {
            margin: 80px 0 0 0;
            text-align: center;

            .button {
              cursor: pointer;
              width: 100%;
              height: 50px;
              color: rgb(96, 98, 102);
              border: 1px rgb(150, 150, 150) solid;
              border-radius: 30px;
              font-size: 16px;
              background-color: rgb(251, 251, 251);
              transition: .3s;
            }

            .button:focus {
              color: rgb(96, 98, 102);
              background-color: rgb(249, 249, 249);
            }

            .button:hover {
              color: rgb(96, 98, 102);
              background-color: rgb(247, 247, 247);
              transition: .3s;
            }

            .button:active {
              color: rgb(96, 98, 102);
              background-color: rgb(243, 243, 243);
            }
          }

        }
      }

    }

    /* ★完整数据切换选项、完整数据 */
    .wz-row {

      /* ▲完整数据切换选项 */
      .wzqh-card {
        height: 500px;
        border-radius: 5px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;

        .data {
          margin: -20px;

          .button1 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 50px;
            line-height: 50px;
            border-radius: 15px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 15px;
            font-size: 15px;
          }

          .button1:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

          .button2 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 15px;
            font-size: 15px;
          }

          .button2:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

        }

      }

      /* ▲完整数据 */
      .wz-card {
        border-radius: 0;
        border: none;
        margin-left: 10px;
        background-color: rgba(255, 255, 255, 0);

        .data {
          margin: -20px;
          // -webkit-touch-callout: none;
          // -webkit-user-select: none;
          // -khtml-user-select: none;
          // -moz-user-select: none;
          // -ms-user-select: none;
          // user-select: none;

          // 基本信息
          .jb {

            // 上半部分
            .top {
              height: 80px;
              font-weight: bold;
              background-color: rgb(220, 220, 220);
              border-top-left-radius: 15px;
              border-top-right-radius: 15px;

              .left {
                margin: 0 0 0 30px;
                padding: 18px 0 0 0;

                .name {
                  float: left;
                  font-size: 30px;
                  color: rgb(80, 80, 80);
                }

                .date {
                  color: rgb(80, 80, 80);
                  padding-left: 40px;
                  vertical-align: -14px;

                  .mr {
                    margin-right: 20px;
                  }

                  .mark {
                    // color: rgb(80, 80, 80);
                  }
                }
              }

            }

            // 下半部分
            .bottom {
              min-height: 800px;
              background-color: white;
              border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;
              border-left: rgb(232, 234, 236) 1px solid;
              border-right: rgb(232, 234, 236) 1px solid;
              border-bottom: rgb(232, 234, 236) 1px solid;
              padding: 10px 10px 0 10px;

              .jb1 {
                height: 408px;
                border-radius: 10px;
                margin-right: 5px;
                border: rgb(232, 234, 236) 1px solid;

                .bc1 {
                  height: 29px;
                  line-height: 29px;
                  background-color: rgba(255, 255, 255, 0);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 10px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }
                }

                .bc2 {
                  height: 29px;
                  line-height: 29px;
                  background-color: rgb(246, 246, 246);

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 10px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                }

                .bc3 {
                  height: 29px;
                  line-height: 29px;
                  background-color: rgb(246, 246, 246);
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;

                  .title {
                    font-weight: bold;
                    margin: 0 10px 0 10px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                }

              }

              .jb2 {
                height: 408px;
                min-width: 460px;
                border-radius: 10px;
                margin: 0 5px 0 5px;
                border: rgb(232, 234, 236) 1px solid;

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 16px;
                  margin: 2px 0 0 0;
                  color: rgb(100, 100, 100);

                  .q {
                    font-size: 15px;
                    font-weight: normal;
                  }
                }

                .switch {
                  float: right;
                  margin: -23px 15px 0 0;
                }

                .divider {
                  margin: -21px 0 -15px 0;
                }

                .jg {

                  // 颜色标注提示
                  .colorTiShi {
                    float: right;
                    width: 20%;
                    // border: #d30505 1px solid;
                    text-align: center;
                    margin-top: 10px;
                    font-size: 13px;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;

                    .tit {
                      color: rgb(190, 190, 190);
                      margin-bottom: 10px;
                    }

                    .jx {
                      margin: 0 auto 15px;
                      color: #d30505;
                      border: #d30505 1px solid;
                      border-radius: 10px;
                      width: 70px;
                      background-color: rgba(211, 5, 5, 0.05);
                      box-shadow: 0 0 5px 2px rgba(211, 5, 5, 0.15);
                    }

                    .rm {
                      margin: 0 auto 15px;
                      color: #d3a12d;
                      border: #d3a12d 1px solid;
                      border-radius: 10px;
                      width: 70px;
                      background-color: rgba(211, 161, 45, 0.05);
                      box-shadow: 0 0 5px 2px rgba(211, 161, 45, 0.15);
                    }

                    .jxrm {
                      margin: 0 auto 15px;
                      color: #4d89e4;
                      border: #4d89e4 1px solid;
                      border-radius: 10px;
                      width: 70px;
                      background-color: rgba(77, 137, 228, 0.05);
                      box-shadow: 0 0 5px 2px rgba(77, 137, 228, 0.15);
                    }

                    .mp {
                      margin: 0 auto 15px;
                      color: #9b4de4;
                      border: #9b4de4 1px solid;
                      border-radius: 10px;
                      width: 70px;
                      background-color: rgba(155, 77, 228, 0.05);
                      box-shadow: 0 0 5px 2px rgba(155, 77, 228, 0.15);
                    }

                    .kw {
                      margin: 0 auto 15px;
                      color: #34c044;
                      border: #34c044 1px solid;
                      border-radius: 10px;
                      width: 70px;
                      background-color: rgba(52, 192, 68, 0.05);
                      box-shadow: 0 0 5px 2px rgba(52, 192, 68, 0.15);
                    }

                  }

                  // 详细模式
                  .detailed {
                    margin: -21px 0 0 0;

                    .big {
                      cursor: pointer;
                      margin: 0 auto;
                      text-align: center;
                      width: 360px;
                      height: 360px;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 116px;
                        height: 110px;
                        line-height: 110px;
                        color: #323232;
                        margin-top: 10px;
                        margin-right: 10px;
                        text-align: center;
                        border-radius: 0;
                        background-color: rgb(247, 247, 247);
                        border: 1px rgba(200, 200, 200) solid;
                        box-shadow: 2px 2px 5px rgb(235, 235, 235);
                        transition: 0.3s;
                      }

                      >div:hover {
                        transition: 0.3s;
                        box-shadow: 0px 1px 5px 3px rgb(220, 220, 220);
                        animation: animateBorder 2.5s linear infinite;
                      }

                      @keyframes animateBorder {
                        0% {
                          border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }

                        50% {
                          border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(255, 255, 91) 100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }

                        100% {
                          border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }
                      }

                    }

                    .small {
                      color: black;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);
                      transition: .3s;

                      >div {
                        width: 37px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 13px;
                        border-radius: 9px;

                        .core {
                          float: left;
                          margin-left: 1px;
                        }

                        .status {
                          width: 20px;
                          height: 16px;
                          line-height: 22px;
                          float: right;
                          color: #828282;
                          font-size: 10px;
                          margin-right: 1px;
                          border-radius: 10px;
                        }

                        .yiKong {
                          // margin-top: -2px;

                          .yiMa {
                            vertical-align: 3px;
                          }

                          .xunKong {
                            margin-left: 1px;
                            font-size: 26px;
                            color: #34c044;
                          }
                        }

                        .dun {
                          width: 39px;
                          color: white;
                          font-size: 12px;
                          border-bottom-left-radius: 2px;
                          background-color: rgb(181, 147, 43);
                        }
                      }

                      .marki {
                        .item {
                          // height: 35px;
                          // line-height: 37px;
                          font-weight: bold;
                          font-size: 12px;
                          background-color: rgb(220, 220, 220);
                          margin-top: 1px;
                          border-top-right-radius: 2px;
                          font-family: 黑体, sans-serif;
                        }
                      }

                      .qin {
                        color: rgb(50, 50, 50);
                      }
                    }

                  }

                  // 精简模式
                  .reduce {
                    text-align: center;
                    margin: -21px 0 0 0;

                    .big {
                      cursor: pointer;
                      margin: 0 auto;
                      text-align: center;
                      width: 360px;
                      height: 360px;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 116px;
                        height: 110px;
                        line-height: 110px;
                        color: #323232;
                        margin-top: 10px;
                        margin-right: 10px;
                        text-align: center;
                        border-radius: 0;
                        background-color: rgb(247, 247, 247);
                        border: 1px rgba(200, 200, 200) solid;
                        box-shadow: 2px 2px 5px rgb(240, 240, 240);
                        cursor: pointer;
                        transition: .3s;
                      }

                      >div:hover {
                        transition: .3s;
                        box-shadow: 0px 1px 5px 3px rgb(220, 220, 220);
                        animation: animateBorder 2.5s linear infinite;
                      }

                      @keyframes animateBorder {
                        0% {
                          border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }

                        50% {
                          border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(255, 255, 91) 100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }

                        100% {
                          border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                          border-image-slice: 1;
                          border-width: 2px;
                        }
                      }

                    }

                    .small {
                      color: black;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);
                      transition: 0.3s;

                      >div {
                        width: 37px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 13px;
                        border-radius: 9px;

                        .core {
                          text-align: center;
                          margin-left: 1px;
                        }

                        .yiKong {
                          // margin-top: -2px;

                          .yiMa {
                            vertical-align: 3px;
                          }

                          .xunKong {
                            margin-left: 1px;
                            font-size: 26px;
                          }
                        }

                        .dun {
                          width: 39px;
                          color: white;
                          font-size: 12px;
                          border-bottom-left-radius: 2px;
                          background-color: rgb(181, 147, 43);
                        }
                      }

                      .marki {
                        .item {
                          height: 35px;
                          line-height: 37px;
                          font-weight: bold;
                          font-size: 12px;
                          background-color: rgb(220, 220, 220);
                          margin-top: 1px;
                          border-top-right-radius: 2px;
                          font-family: 黑体, sans-serif;
                        }
                      }

                      .qin {
                        color: #323232;
                      }
                    }

                  }

                }

              }

              .jb3 {
                height: 408px;
                border-radius: 10px;
                margin-left: 5px;
                border: rgb(232, 234, 236) 1px solid;

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 16px;
                  margin: 2px 0 0 0;
                  color: rgb(100, 100, 100);

                  .q {
                    font-size: 15px;
                    font-weight: normal;
                  }
                }

                .divider {
                  margin: -21px 0 -15px 0;
                }

                .date {
                  margin-top: -26px;

                  .tag {
                    width: 100%;
                    border-radius: 0;
                    border: none;
                  }

                  .mt {
                    margin-top: -13px;
                    border-bottom: rgb(232, 234, 236) 1px solid;
                  }
                }

                .sc {
                  // height: 100px;
                  text-align: center;
                  margin: 2px -12px 0 0 !important;
                  // border: none;

                  .title-y {
                    color: rgb(80, 80, 80);
                    font-weight: bold;
                    margin-left: -2px;
                    line-height: 10px;
                    font-size: 14px !important;
                  }

                  .title-n {
                    color: white;
                    font-weight: bold;
                    margin-left: -2px;
                    line-height: 10px;
                    font-size: 14px !important;
                  }

                  .yes {
                    height: 26px;
                    width: 110px;
                    // background-color: rgb(0, 160, 255);
                    background-color: rgb(247, 247, 247);
                    border-radius: 0;
                    transition: .3s;
                    margin: 0px 15px 5px 0;
                    animation: animate 2.6s linear infinite;
                  }

                  // .yes:focus {
                  //   background-color: rgb(0, 170, 255);
                  // }

                  // .yes:hover {
                  //   background-color: rgb(0, 170, 255);
                  //   transition: .3s;
                  // }

                  // .yes:active {
                  //   background-color: rgb(0, 150, 255);
                  // }

                  @keyframes animate {
                    0% {
                      border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }

                    50% {
                      border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(255, 255, 91) 100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }

                    100% {
                      border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }
                  }

                  .no {
                    height: 26px;
                    width: 110px;
                    background-color: rgb(90, 90, 90);
                    border-radius: 1px;
                    transition: .3s;
                    border: none !important;
                    margin: 0px 15px 5px 0;
                  }

                  .no:focus {
                    // background-color: rgb(130, 130, 130);
                  }

                  .no:hover {
                    background-color: rgb(103, 103, 103);
                    transition: .3s;
                  }

                  .no:active {
                    background-color: rgb(80, 80, 80);
                  }
                }

                .divider2 {
                  margin: -24px 0 -15px 0;
                }

                .sxj {
                  padding-top: 12px;

                  .sj {
                    text-align: center;

                    .but {
                      width: 60px;
                      height: 25px;
                      line-height: 24px;
                      color: rgb(96, 98, 102);
                      border: 1px rgb(150, 150, 150) solid;
                      // background-color: rgb(30, 30, 30);
                      border-radius: 10px;
                      font-size: 12px;
                      background-color: rgb(253, 253, 253);
                      box-shadow: none;

                      .text {
                        margin-left: -12px;
                      }
                    }

                    .but:focus {
                      color: rgb(96, 98, 102);
                      background-color: rgb(253, 253, 253);
                    }

                    .but:hover {
                      color: rgb(96, 98, 102);
                      background-color: rgb(248, 248, 248);
                    }

                    .but:active {
                      color: rgb(96, 98, 102);
                      background-color: rgb(245, 245, 245);
                    }
                  }

                  .dzxy {
                    text-align: center;

                    .but {
                      width: 85px;
                      height: 25px;
                      line-height: 24px;
                      color: rgb(96, 98, 102);
                      border: 1px rgb(150, 150, 150) solid;
                      // background-color: rgb(30, 30, 30);
                      border-radius: 10px;
                      font-size: 12px;
                      background-color: rgb(253, 253, 253);
                      box-shadow: none;

                      .text {
                        margin-left: -13px;
                        // text-align: center;
                      }
                    }

                    .but:focus {
                      color: rgb(96, 98, 102);
                      background-color: rgb(253, 253, 253);
                    }

                    .but:hover {
                      color: rgb(96, 98, 102);
                      background-color: rgb(248, 248, 248);
                    }

                    .but:active {
                      color: rgb(96, 98, 102);
                      background-color: rgb(245, 245, 245);
                    }
                  }

                  .xj {
                    text-align: center;

                    .but {
                      width: 60px;
                      height: 25px;
                      line-height: 24px;
                      color: rgb(96, 98, 102);
                      border: 1px rgb(150, 150, 150) solid;
                      // background-color: rgb(30, 30, 30);
                      border-radius: 10px;
                      font-size: 12px;
                      background-color: rgb(253, 253, 253);
                      box-shadow: none;

                      .text {
                        margin-left: -12px;
                      }
                    }

                    .but:focus {
                      color: rgb(96, 98, 102);
                      background-color: rgb(253, 253, 253);
                    }

                    .but:hover {
                      color: rgb(96, 98, 102);
                      background-color: rgb(248, 248, 248);
                    }

                    .but:active {
                      color: rgb(96, 98, 102);
                      background-color: rgb(245, 245, 245);
                    }
                  }
                }

                .dzxyts {
                  text-align: center;
                  color: rgb(150, 150, 150);
                  font-size: 10px;
                  margin: 2px 0 0 -8px;
                }

                .dzxyms {
                  margin: 3px 0 0 10px;

                  div {
                    line-height: 32px;

                    .segmented {
                      --el-segmented-item-selected-color: rgb(255, 255, 255);
                      --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
                      --el-border-radius-base: 16px;
                    }

                    .titlel {
                      font-size: 10px;
                      // margin-right: 5px;
                      vertical-align: 1px;
                    }
                  }

                }

              }

              .jb4-card {
                height: 100px;
                margin-top: 9px;
                border-radius: 10px;
                background-color: rgb(253, 253, 253);

                .datajb {
                  margin: -20px -10px 0 -10px;

                  .null {
                    color: rgb(150, 150, 150);
                    text-align: center;
                    margin: 7px 0 -7px 0;
                  }

                  .mark {
                    float: right;
                    font-size: 10px;
                    color: rgb(14, 169, 0);
                  }
                }

              }

              .jb-button {
                height: 53px;
                padding: 10px;
                border-radius: 10px;
                margin-top: 10px;
                border: rgb(212, 176, 104) 2px solid;
                background-color: rgb(255, 252, 246);

                .button {
                  .yes {
                    color: rgb(60, 60, 60);
                    border-radius: 0;
                    margin-right: 10px;
                    // background-color: rgb(150, 150, 150);
                    transition: 0.3s;
                    margin-bottom: 10px;
                    animation: animateBorder2 2.5s linear infinite;
                    width: 95px;

                    .da {
                      margin-left: -11.5px;

                      .nei {
                        color: rgb(14, 172, 0);
                      }

                      .wai {
                        color: rgb(0, 136, 255);
                      }

                      .ml {
                        margin-left: 11.5px;
                      }
                    }

                  }

                  .yes:focus {
                    background-color: rgb(251, 251, 251);
                    transition: 0.3s;
                  }

                  .yes:hover {
                    background-color: rgb(251, 251, 251);
                    transition: 0.3s;
                  }

                  .yes:active {
                    background-color: rgb(251, 251, 251);
                    transition: 0.3s;
                  }

                  .no {
                    color: rgb(60, 60, 60);
                    border-radius: 0;
                    margin-right: 10px;
                    background-color: white;
                    transition: 0.3s;
                    margin-bottom: 10px;
                    width: 95px;

                    .da {
                      margin-left: -10px;

                      .nei {
                        color: rgb(14, 172, 0);
                      }

                      .wai {
                        color: rgb(0, 136, 255);
                      }

                      .ml {
                        margin-left: 10px;
                      }
                    }
                  }

                  .no:focus {
                    background-color: rgb(251, 251, 251);
                    transition: 0.1s;
                  }

                  .no:hover {
                    background-color: rgb(251, 251, 251);
                    transition: 0.3s;
                  }

                  .no:active {
                    background-color: rgb(251, 251, 251);
                    transition: 0.1s;
                  }

                  @keyframes animateBorder2 {
                    0% {
                      border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }

                    50% {
                      border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(255, 255, 91) 100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }

                    100% {
                      border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                      border-image-slice: 1;
                      border-width: 3px;
                    }
                  }
                }

              }

              .jb6-card {
                height: 160px;
                margin-top: 10px;
                border-radius: 10px;
                background-color: rgb(253, 253, 253);

                .datajb {
                  margin: -10px;

                  .null {
                    color: rgb(150, 150, 150);
                    text-align: center;
                  }

                  .dg {

                    .oneGong {
                      float: left;
                      margin-right: 20px;

                      .title-0 {
                        background-color: rgb(249, 249, 249);
                        text-align: center;
                        width: 110px;
                        height: 26px;
                        line-height: 24px;
                        margin-top: 5px;
                        border: 1px rgba(0, 0, 0, 0.26) solid;
                        border-radius: 5px;
                      }

                      .small {
                        background-color: rgb(249, 249, 249);
                        color: black;
                        display: grid;
                        height: 110px;
                        width: 110px;
                        border: 1px rgba(0, 0, 0, 0.26) solid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-template-rows: repeat(3, 1fr);
                        border-radius: 5px;

                        >div {
                          width: 35px;
                          line-height: 35px;
                          text-align: center;
                          font-size: 13px;

                          .dun {
                            width: 36px;
                            color: white;
                            font-size: 12px;
                            border-radius: 0 4px 0 2px;
                            background-color: rgb(181, 147, 43);
                          }

                          .yiKong {
                            cursor: default;
                            line-height: 31px;
                          }

                          .yiKong .xunKong {
                            // zoom: 1.5;
                            margin-left: 2px;
                            font-size: 20px;
                          }
                        }
                      }
                    }

                    .oneGong1 {
                      float: left;
                      margin-right: 20px;

                      .title-1 {
                        text-align: center;
                        width: 110px;
                        margin-top: 5px;
                        height: 26px;
                        line-height: 24px;
                        border: 1px rgb(83, 162, 189) solid;
                        border-radius: 5px;
                        margin-left: 10px;
                        background-color: rgb(249, 249, 249);
                      }

                      .small {
                        color: black;
                        display: grid;
                        height: 110px;
                        width: 110px;
                        margin-left: 10px;
                        border: 1px rgb(83, 162, 189) solid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-template-rows: repeat(3, 1fr);
                        border-radius: 5px;
                        background-color: rgb(249, 249, 249);

                        >div {
                          width: 35px;
                          line-height: 35px;
                          text-align: center;
                          font-size: 13px;

                          .dun {
                            width: 36px;
                            color: white;
                            font-size: 12px;
                            border-radius: 0 4px 0 2px;
                            background-color: rgb(181, 147, 43);
                          }

                          .yiKong {
                            cursor: default;
                            line-height: 31px;
                          }

                          .yiKong .xunKong {
                            margin-left: 2px;
                            font-size: 20px;
                          }
                        }
                      }
                    }

                    .yueLing {
                      float: left;
                      margin-left: 10px;

                      .title-2 {
                        text-align: center;
                        width: 110px;
                        margin-top: 5px;
                        height: 26px;
                        line-height: 24px;
                        border-radius: 5px;
                        border: 1px rgb(189, 154, 83) solid;
                        background-color: rgb(249, 249, 249);
                      }

                      .small {
                        color: black;
                        display: grid;
                        height: 110px;
                        width: 110px;
                        border-radius: 5px;
                        border: 1px rgb(189, 154, 83) solid;
                        background-color: rgb(249, 249, 249);

                        >div {
                          width: 110px;
                          line-height: 35px;
                          text-align: center;
                          font-size: 13px;
                        }
                      }
                    }

                    .mark {
                      float: right;
                      font-size: 10px;
                      color: rgb(14, 169, 0);
                      margin-top: 124px;
                    }

                    .gMark {
                      float: right;
                      margin: 20px 30px 0 0;

                      .mark-n {
                        cursor: pointer;
                        border: 1px rgba(14, 172, 0, 0.2) solid;
                        width: 100px;
                        height: 100px;
                        text-align: center;
                        line-height: 100px;
                        border-radius: 50px;
                        color: rgb(14, 172, 0);
                        background-color: rgba(14, 172, 0, 0.05);
                        transition: .3s;
                      }

                      .mark-n:hover {
                        background-color: rgba(14, 172, 0, 0.08);
                        transition: .3s;
                      }

                      .mark-w {
                        cursor: pointer;
                        border: 1px rgba(0, 136, 255, 0.2) solid;
                        width: 100px;
                        height: 100px;
                        text-align: center;
                        line-height: 100px;
                        border-radius: 50px;
                        color: rgb(0, 136, 255);
                        background-color: rgba(0, 136, 255, 0.05);
                        transition: .3s;

                      }

                      .mark-w:hover {
                        background-color: rgba(0, 136, 255, 0.08);
                        transition: .3s;
                      }
                    }

                    .quShu {
                      color: rgb(150, 150, 150);
                      float: right;
                      width: 160px;
                      height: 120px;
                      border: 1px rgb(204, 205, 208) solid;
                      margin: 10px 0px 0 0;
                      border-radius: 10px;

                      .tit {
                        text-align: center;
                        font-weight: bold;
                      }

                      .hr {
                        width: 100%;
                        margin: -25px 0 -20px 0;
                      }

                      .dat {
                        color: rgb(100, 100, 100);
                        margin-left: 10px;

                        .zong {
                          color: rgb(154, 121, 57);
                          // margin-right: 14px;
                          // font-weight: bold;
                        }
                      }


                    }

                  }

                }

              }

              .jb7-card {
                min-height: 160px;
                margin: 9px 0 10px 0;
                border-radius: 10px;
                background-color: rgb(253, 253, 253);

                .datajb {
                  margin: -20px -10px -15px -10px;

                  .tag {
                    text-align: center;
                    min-width: 130px;
                    // border: 1px rgb(200, 200, 200) solid;
                  }

                  .item {
                    vertical-align: -1px;
                    font-family: 黑体;
                    // font-size: 14px;
                  }

                  .mark {
                    float: right;
                    font-size: 10px;
                    color: rgb(14, 169, 0);
                    margin: 60px 0 0px 0;
                  }

                  .null {
                    color: rgb(150, 150, 150);
                    text-align: center;
                    margin-top: 35px;
                  }

                }
              }

              .jb8 {
                min-height: 300px;
                margin: 10px 0 10px 0;
                border-radius: 10px;
                border: rgb(232, 234, 236) 1px solid;
                background-color: rgb(253, 253, 253);

                .datajb {
                  margin: 0 10px 0 10px;

                  .jiBen {
                    text-align: center;
                    font-weight: bold;

                    .tag {
                      border: none;
                    }
                  }

                  .gua6 {

                    .card-b {
                      // height: 180px;
                      overflow-x: auto;
                      background-color: rgb(253, 253, 253);
                      border-radius: 0px 0px 5px 5px;
                      margin: 0 -10px 0 -10px;
                      border: none;

                      .naming {
                        font-size: 12px;
                        margin: -20px 0 0 3px;
                        color: rgb(200, 200, 200);
                      }

                      .ym {}

                      .gx {
                        margin-left: 33px;
                      }

                      .yc {
                        margin-left: 36px;
                      }

                      .yaoming {
                        float: left;
                        width: 40px;

                        // margin-top: -1px;
                        >div {
                          color: #323232;
                          height: 16.5px;
                          // line-height: 16.5px;
                          font-size: 13px;
                        }
                      }

                      .guaxiang {
                        float: left;
                        margin: -25px -5px 0 -20px;

                        >div {
                          zoom: 8;
                        }
                      }

                      .yaoci {
                        margin: 1px 0 0 120px;
                        font-family: 宋体, serif;

                        >div {
                          height: 16.2px;
                          // line-height: 16.2px;
                          font-size: 13px;
                          white-space: nowrap;
                        }
                      }

                      .divider {
                        margin: -15px -20px 0 -20px;
                      }

                      .name {
                        float: right;
                        margin: -95px 40px 0 0;
                        font-weight: bold;
                        -webkit-touch-callout: none;
                        -webkit-user-select: none;
                        -khtml-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;

                        .size {
                          font-size: 15px;
                          height: 40px;
                        }
                      }


                      .ck {

                        .link {
                          float: left;
                          font-size: 15px;
                          // font-family: 楷体, serif;
                          margin: -28px 0 10px 0;
                        }
                      }
                    }

                    .mb {
                      margin-bottom: 17px;
                    }

                  }

                  .null {
                    color: rgb(150, 150, 150);
                    text-align: center;
                    margin-top: 110px;
                  }

                }

                .mark {
                  float: right;
                  font-size: 10px;
                  color: rgb(14, 169, 0);
                  margin: 0 0 0 0;
                }
              }

            }

          }

          // 信息解读
          .jd {

            // 上半部分
            .top {
              height: 80px;
              font-weight: bold;
              background-color: rgb(220, 220, 220);
              border-top-left-radius: 15px;
              border-top-right-radius: 15px;

              .left {
                margin: 0 0 0 30px;
                padding: 18px 0 0 0;

                .name {
                  float: left;
                  font-size: 30px;
                  color: rgb(80, 80, 80);
                }

                .date {
                  color: rgb(80, 80, 80);
                  padding-left: 40px;
                  vertical-align: -14px;

                  .mr {
                    margin-right: 20px;
                  }

                  .mark {
                    // color: rgb(80, 80, 80);
                  }
                }
              }

            }

            // 下半部分
            .bottom {
              min-height: 540px;
              background-color: white;
              border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;
              border-left: rgb(232, 234, 236) 1px solid;
              border-right: rgb(232, 234, 236) 1px solid;
              border-bottom: rgb(232, 234, 236) 1px solid;
              padding: 10px 10px 0 10px;

              .jb1 {
                // zoom: 0.9;

                .header {
                  font-size: 17px;
                }

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 16px;
                  margin: -15px 0 0 0;
                  color: rgb(100, 100, 100);

                  .q {
                    font-size: 15px;
                    font-weight: normal;
                  }
                }

                .switch {
                  float: right;
                  margin: -24px 15px 0 0;
                }

                .divider {
                  margin: -24px 0 -15px 0;
                }

                .jg {

                  // 详细模式
                  .detailed {
                    // text-align: center;
                    margin: -21px 0 21px -10px;

                    .big {

                      margin: 0 auto;
                      text-align: center;
                      width: 360px;
                      height: 360px;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 116px;
                        height: 110px;
                        line-height: 110px;
                        color: #323232;
                        margin-top: 10px;
                        margin-right: 10px;
                        text-align: center;
                        border-radius: 0;
                        background-color: rgb(245, 245, 245);
                        border: 1px rgba(200, 200, 200) solid;
                        box-shadow: 2px 2px 5px rgb(235, 235, 235);
                      }
                    }

                    .small {
                      color: black;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 37px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 13px;
                        border-radius: 9px;

                        .core {
                          float: left;
                          margin-left: 1px;
                        }

                        .status {
                          width: 20px;
                          height: 16px;
                          line-height: 22px;
                          float: right;
                          color: #828282;
                          font-size: 10px;
                          margin-right: 1px;
                          border-radius: 10px;
                        }

                        .yiKong {
                          // margin-top: -2px;

                          .yiMa {
                            vertical-align: 3px;
                          }

                          .xunKong {
                            margin-left: 1px;
                            font-size: 26px;
                            color: #34c044;
                          }
                        }

                        .dun {
                          width: 39px;
                          color: white;
                          font-size: 12px;
                          border-radius: 0 0 0 2px;
                          background-color: rgb(181, 147, 43);
                        }
                      }

                      .marki {
                        .item {
                          // height: 35px;
                          // line-height: 37px;
                          font-weight: bold;
                          font-size: 12px;
                          background-color: rgb(220, 220, 220);
                          margin-top: 1px;
                          border-top-right-radius: 2px;
                          font-family: 黑体, sans-serif;
                        }
                      }

                      .qin {
                        color: rgb(50, 50, 50);
                      }
                    }

                  }

                  // 精简模式
                  .reduce {
                    text-align: center;
                    margin: -21px 0 0 -10px;

                    .big {
                      margin: 0 auto;
                      text-align: center;
                      width: 360px;
                      height: 360px;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 116px;
                        height: 110px;
                        line-height: 110px;
                        color: #323232;
                        margin-top: 10px;
                        margin-right: 10px;
                        text-align: center;
                        border-radius: 0;
                        background-color: rgb(247, 247, 247);
                        border: 1px rgba(200, 200, 200) solid;
                        box-shadow: 2px 2px 5px rgb(240, 240, 240);
                      }
                    }

                    .small {
                      color: black;
                      display: grid;
                      grid-template-rows: repeat(3, 1fr);
                      grid-template-columns: repeat(3, 1fr);

                      >div {
                        width: 37px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 13px;
                        border-radius: 9px;

                        .core {
                          text-align: center;
                          margin-left: 1px;
                        }

                        .yiKong {
                          // margin-top: -2px;

                          .yiMa {
                            vertical-align: 3px;
                          }

                          .xunKong {
                            margin-left: 1px;
                            font-size: 26px;
                            // color: #34c044;
                          }
                        }

                        .dun {
                          width: 39px;
                          color: white;
                          font-size: 12px;
                          border-radius: 0 0 0 2px;
                          background-color: rgb(181, 147, 43);
                        }
                      }

                      .marki {
                        .item {
                          // height: 35px;
                          // line-height: 37px;
                          font-weight: bold;
                          font-size: 12px;
                          background-color: rgb(220, 220, 220);
                          margin-top: 1px;
                          border-top-right-radius: 2px;
                          font-family: 黑体, sans-serif;
                        }
                      }

                      .qin {
                        color: #323232;
                      }
                    }

                  }

                }

              }

              .jb2-card {
                min-height: 110px;
                border-radius: 10px;
                margin-top: 10px;
                background-color: rgb(253, 253, 253);

                .datajb {
                  margin: -20px -10px -20px -10px;

                  .ts {
                    float: right;

                    .ck {
                      cursor: pointer;
                      color: rgb(80, 80, 80);
                    }

                    .ck:hover {
                      text-decoration: underline;
                    }
                  }
                }


              }

            }

          }

        }
      }

    }

  }
}